<template>
	<view class="my h100">
		<view class="my-top">
			<view class="flex s-center">
				<image src="/static/img/my/portrait.png" class="portrait"></image>
				<view class="msg">
					<text class="txt">{{ userInfo.nickName || 'vue3-app' }}</text>
				</view>
			</view>
		</view>
		<u-list class="list">
			<u-list-item v-for="item in indexList" :key="item.name">
				<u-cell :icon="item.icon" :title="item.name" :isLink="item.url ? true : false" @click="handleClick(item.url)">
					<template #value>
						<view v-if="item.type === 'theme'">
							<u-switch v-model="value" activeColor="#0b1026" activeValue="dark" inactiveValue="light" @change="selectChange"></u-switch>
						</view>
						<view v-if="item.type === 'edition'">V{{ version }}</view>
						<view v-if="item.type === 'phone'">029-111111</view>
					</template>
				</u-cell>
			</u-list-item>
		</u-list>
		<u-button @tap="logout()" class="logout" shape="circle" color="linear-gradient(83deg, #B8B9BF 1%, #B7BABF 99%)">退出登录</u-button>
	</view>
</template>
<script setup>
import { getAuthorization } from '@/router/auth.js';
import { ref } from 'vue';
// 基础变量
const userInfo = getAuthorization('userInfo');
const value = ref('light');
let version = ref('1.0.0');
const indexList = [
	{
		icon: '/static/img/my/grxx.png',
		name: '个人信息',
		url: '/pages/my/personDetail'
	}
	// {
	// 	icon: '/static/img/my/xgmm.png',
	// 	name: '修改密码',
	// 	url: '/pages/my/modifyPassword'
	// }
	// {
	// 	icon: '/static/img/my/phone.png',
	// 	type: 'phone',
	// 	name: '客服电话',
	// }
];
// 基础变量
const handleClick = (url) => {
	if (url) {
		uni.navigateTo({
			url
		});
	}
};
const logout = () => {
	uni.showModal({
		title: '提示',
		content: '确定要退出并清理缓存吗?',
		success(res) {
			if (res.confirm) {
				uni.clearStorage({
					success: function () {
						console.log('Clear storage success!');
					}
				});
				uni.reLaunch({
					url: '/pages/login/login'
				});
			}
		}
	});
};
</script>
<style lang="scss" scoped>
.my {
	background-color: $bg-color;

	&-top {
		padding: calc(80rpx + var(--status-bar-height)) 40rpx 0;
		background: url('@/static/img/my/bg.png') no-repeat;
		background-size: 100% 100%;
		height: 300rpx;

		.portrait {
			width: 200rpx;
			height: 200rpx;
		}

		.msg {
			color: #ffffff;
			margin-left: 20rpx;

			.txt {
				font-size: 52rpx;
				position: relative;
			}

			.team {
				position: relative;
				padding-left: 30rpx;

				&:before {
					content: '';
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
					width: 24rpx;
					height: 24rpx;
					background: url('@/static/img/my/team-icon.png') no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}

	.list {
		background: #fff;
	}

	.logout {
		width: 90%;
		border: 0.5px solid #cdcdcd;
		position: absolute;
		left: 5%;
		bottom: 3%;
	}
}
</style>